/*
  a-modal 二次封装
  分布：
    title
    content
    button
    水平垂直居中
  接口：
    根据传值去调用接口 （未封装完成）
 */
<template>
  <div class="dialog">
    <a @click="handleOpen">{{btnName}}</a>
    <a-modal
      v-model.trim="visible"
      :title="title"
      @ok="handleOk"
      class="fleet-modal"
      :footer="null"
      v-bind="$attrs"
      v-on="$listeners"
    >
      <slot></slot>
      <div class="modal-button">
        <a-button @click="handleClose" class="modal-button-cancel" type="line">取消</a-button>
        <a-button @click="handleOk" type="primary">确定</a-button>
      </div>
    </a-modal>
  </div>
</template>

<script>
import {getTrailerRecordList} from '@/services/businessManage'
  export default {
    props: {
        // 按钮的名称
      btnName: {
        type: String,
        default: ''
      },
      // 弹框的标题
      title: {
        type: String,
        default: '内容'
      },
      id: {
        type: String
      },
      info: {
        type: Object,
        default: ()=>{}
      }
    },
    data(){
      return {
        visible: false,
        recordTable: []
      }
    },
    watch: {
      visible (val) {
        if (val) {
          this.getList()
        } else {
          this.list = []
        }
      }
    },
    created(){
      this.getList()
    },
    methods: {
    async getList(){
       this.isLoading = true;
      const {
        data: { data, message, code }
      } = await getTrailerRecordList({id: this.id});
      if (code === 200) {
        this.$message.success(message);
        this.isLoading = false;
        this.recordTable = data.vehicleList || [];
      }
      },
      handleOpen () {
        this.visible = true
      },
      handleClose () {
        this.visible = false
      },
      async handleOk(){

      }
    }
  }
</script>

<style lang="less" scoped>
.dialog{
  display: inline-block;
}
.fleet-modal {
  ::v-deep .ant-modal-content{
    text-align: center;
  }
  /* 设置a-modal弹出框去除两条横线 */
  ::v-deep .ant-modal-content .ant-modal-header {
    border-bottom: none !important;
  }
  ::v-deep .ant-modal-content .ant-modal-footer {
    border-top: none !important;
  }
}
.modal-button{
  margin: 30px auto 0;
  &-cancel{
    margin-right: 40px;
  }
}
</style>
